<!-- 提现页面 -->
<template>
	<view class="container">
		<view class="fixed-head"></view>
		<view class="header">
			<image class="header-bg" src="/static/images/bg-withdraw.png" mode="aspectFill"></image>
			<view class="content ">
				<view>账户余额</view>
				<view class="u-f-jsb">
					<view class="num">
						<text style="font-size: 34rpx;">￥</text>
						{{ unEarnMoney ? unEarnMoney : '0.00' }}
					</view>

					<view v-if="userinfo.isMain==1" class="btn-withdraw" @tap="openWithdraw">提现</view>
				</view>
			</view>
		</view>
		<view class="body">
			<view class="tabs u-f-ajc" :class="{ w100: isReachTop }">
				<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="tabChange" active-color="rgba(255, 206, 0, 1)" bar-width="80" item-width="300"></u-tabs>
			</view>
			<view class="list" v-if="current==0">
				<block v-for="(item, index) in preWithdrawList" :key="index">
					<view class="item" data-url="billDetail/billDetail">
						<view class="u-f-jsb">
							<view>{{ item.billCode }}</view>
							<!-- <view class="status" v-if="item.billStatus == 0">提现审核中</view> -->
						</view>
						<view class="u-f-jsb">
							<view>{{item.operName}}</view>
							<view class="money">￥{{ item.billMoney }}</view>
						</view>
						<view class="time">{{item.billDate}}</view>
					</view>
				</block>
				<view class="no-data" v-if="!preWithdrawList.length">
					<image src="/static/images/noData1.png" mode="aspectFill"></image>
					暂无提现账单
				</view>
				<loading-bar v-if="preWithdrawList.length" :status="statusArr[0]"></loading-bar>
			</view>
			<view class="list" v-else>
				<block v-for="(item, index) in afterWithdrawList" :key="index">
					<view class="item" :data-url="`billDetail/billDetail?id=${item.billId}`" @tap="$jumpPage">
						<view class="u-f-jsb">
							<view>{{ item.billCode }}</view>
							<view class="status" v-if="item.billStatus !== 1">提现审核中</view>
							<view class="status" v-else-if="item.billStatus == 1" style="color: #808080;">已结算</view>
						</view>
						<view class="u-f-jsb">
							<view>{{ item.operName }}</view>
							<view class="money">￥{{ item.billMoney }}</view>
						</view>
						<view class="time">{{ item.billDate }}</view>
					</view>
				</block>
				<view class="no-data" v-if="!afterWithdrawList.length">
					<image src="/static/images/noData1.png" mode="aspectFill"></image>
					暂无提现记录
				</view>
				<loading-bar v-if="afterWithdrawList.length" :status="statusArr[0]"></loading-bar>
			</view>
		</view>
		<withdraw-confirm ref="popupConfirm" @confirm="confirmWithdraw"></withdraw-confirm>
		<withdraw-suc ref="withdrawSuc" @refresh="refresh"></withdraw-suc>
	</view>
</template>

<script>
import withdrawConfirm from '@/components/popup/withdraw-confirm.vue';
import withdrawSuc from '@/components/popup/withdraw-suc.vue';
import loadingBar from '@/components/loading-bar/loading-bar.vue';

export default {
	components: { withdrawConfirm, withdrawSuc, loadingBar },
	data() {
		return {
			tabList: [
				{
					name: '提现账单'
				},
				{
					name: '提现记录'
				}
			],
			current: 0,
			isReachTop: false, // tab是否到达顶部
			status: 'loading',
			pageArr: [1, 1],
			statusArr: ['loading', 'loading'], // 底部加载栏状态
			coutnsArr: [0,0], // 账单数据总条数
			preWithdrawList: [], // 提现前
			afterWithdrawList: [], // 提现后,
			unEarnMoney: '' // 待提现总额
		};
	},
	computed:{
		userinfo() {
			return this.$store.state.userinfo;
		},
		bindedWxInfo() {
			return this.$store.state.bindedWxInfo;
		}
	},
	watch: {
		current(newVal) {
			this.getWithdrawList();
		}
	},
	onLoad() {
		this.getWithdrawList();
	},
	onReady() {
		uni.createIntersectionObserver(this)
			.relativeTo('.fixed-head', { observeAll: true })
			.observe('.tabs', res => {
				console.log(res);
				let iterRatio = res.intersectionRatio;
				if (iterRatio > 0) {
					this.isReachTop = true;
				} else {
					this.isReachTop = false;
				}
			});
	},
	onReachBottom() {
		this.pageArr[this.current]++;
		this.getWithdrawList();
	},
	methods: {
		refresh() {
			if(this.current == 1) {
				this.getWithdrawList();
			}
			this.current = 1;
		},
		// 获取账单列表 billStatus -0待提现账单，1提现记录
		getWithdrawList() {
			let billType = this.current;
			let page = this.pageArr[this.current];
			let limit =  30;
			this.$u.api._withdrawList({ billType, limit, page }).then(res => {
				this.coutnsArr[this.current]=res.counts;
				if (billType == 1) {
					this.afterWithdrawList = [...this.afterWithdrawList,...res.lstBills.data];
				} else {
					this.preWithdrawList = [...this.preWithdrawList,...res.lstBills.data];
				}
				if (!res.lstBills.data.length || res.lstBills.data.length < limit) {
					this.statusArr.splice(this.current, 1, 'nomore');
				} else {
					this.statusArr.splice(this.current, 1, 'loadmore');
				}
				this.unEarnMoney = res.unEarnMoney;
			});
		},
		// 加载更多
		scrolltolower() {
			this.pageArr[this.current]++;
			this.statusArr.splice(this.current, 1, 'loading');
			this.getWithdrawList();
		},
		// 提现申请
		withdrawApply() {
			let biilIds = this.preWithdrawList.map(item => item.billId);
			biilIds = biilIds.toString();
			this.$u.api._withdrawApply({ biilIds }).then(res => {
				this.$refs.withdrawSuc.open();
			});
		},
		swiperChanage(e) {
			console.log(e);
			this.current = e.detail.current;
		},
		tabChange(idx) {
			this.current = idx;
			this.pageArr[idx] = 1;
			if(idx===0) {
				this.preWithdrawList = [];
			} else {
				this.afterWithdrawList = [];
			}
		},
		// 确认提现
		confirmWithdraw() {
			this.withdrawApply();
		},
		openWithdraw() {
			if (!this.bindedWxInfo.payeeOpenId) {
				return uni.showModal({
					title: '提示',
					content: '当前分润账号未绑定微信收款账户，请先进行绑定！',
					showCancel: false,
					success: () => {
							uni.navigateTo({
								url:'/pages/accountManage/bindWxAccount/bindWxAccount'
							})
					}
				});
			}
			if (!this.preWithdrawList.length) {
				return uni.showModal({
					title: '提示',
					content: '暂无可提现账单',
					showCancel: false
				});
			}
			
			this.$refs.popupConfirm.open();
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: RGBA(245, 245, 245, 1);
}
.container {
	padding: 20rpx 20rpx 0 20rpx;
}
.fixed-head {
	position: fixed;
	top: 0;
	width: 100%;
	height: 1rpx;
	z-index: -1;
}
.no-data {
	margin-top: 200rpx;
}
.header {
	width: 710rpx;
	height: 290rpx;
	position: relative;
	image {
		width: 100%;
		height: 100%;
	}

	.content {
		position: absolute;
		top: 80rpx;
		width: 710rpx;
		padding: 0 40rpx;
		>view:first-child {
			margin-bottom: 10rpx;
			color: #757575;
		}
		.num {
			color: #ffffff;
			font-size: 48rpx;
			font-weight: 600;
		}
		.btn-withdraw {
			font-size: 28rpx;
			background-color: #ffffff;
			border-radius: 35rpx;
			width: 200rpx;
			line-height: 70rpx;
			text-align: center;
		}
	}
}

.body {
	border-radius: 16rpx 16rpx 0px 0px;
	background-color: #ffffff;
	width: 100%;
	min-height: 300rpx;
	margin-top: 24rpx;

	.tabs {
		border-bottom: 1rpx solid #eee;
		position: sticky;
		height: 88rpx;
		top: 0;
		background-color: #ffffff;
		&.w100 {
			width: 100vw;
			margin: 0 !important;
			background-color: #ffffff !important;
			margin-left: -20rpx !important;
			z-index: 999;
		}
	}

	.list {
		padding: 0 20rpx;
		margin-bottom: 30rpx;
		min-height: 80vh;
		.item {
			height: 190rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			border-bottom: 1rpx solid #eee;
			padding: 10rpx 20rpx;
			font-weight: 500;

			.time {
				font-size: 28rpx;
				color: rgba(153, 153, 153, 1);
			}

			.money {
				color: rgba(255, 206, 0, 1);
				font-weight: 600;
			}
			.status {
				color: rgba(255, 0, 0, 1);
			}
		}
	}
}
</style>
